<template>
  <el-card>
    <el-table :data="categoryList" style="width: 100%" row-key="key" border lazy :load="load" :row-class-name="setStyle"
      :tree-props="{ children: 'category2List', hasChildren: 'hasChildren' }">
      <el-table-column label="分类ID" prop="id" width="120">

      </el-table-column>
      <el-table-column label="分类名称" width="900" prop="name">

      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input size="mini" placeholder="按enter键添加一级分类" />
        </template>
        <template slot-scope="scope">
          <el-button type="primary" class="el-icon-plus" size="mini"></el-button>
          <el-button type="primary" class="el-icon-edit" size="mini"></el-button>
          <el-button type="danger" class="el-icon-delete" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table> -->
  </el-card>
</template>

<script>
import { mapState } from 'vuex';
import reqCategory from '@/api/category'

export default {
  name: 'CategorySet',
  // data: () => ({
  //   tableData1: [{
  //     id: 1,
  //     date: '2016-05-02',
  //     name: '王小虎',
  //     address: '上海市普陀区金沙江路 1518 弄'
  //   }, {
  //     id: 2,
  //     date: '2016-05-04',
  //     name: '王小虎',
  //     address: '上海市普陀区金沙江路 1517 弄'
  //   }, {
  //     id: 3,
  //     date: '2016-05-01',
  //     name: '王小虎',
  //     address: '上海市普陀区金沙江路 1519 弄',
  //     hasChildren: true
  //   }, {
  //     id: 4,
  //     date: '2016-05-03',
  //     name: '王小虎',
  //     address: '上海市普陀区金沙江路 1516 弄'
  //   }]
  // }),
  computed: {
    ...mapState('category', ['category1List', 'category2List', 'category3List']),
    categoryList: {
      get() {
        return this.category1List.map((item) => {
          return {
            ...item,
            key: item.id + item.name,
            category2List: [],
            hasChildren: true
          }
        })
      },
    }
  },
  methods: {
    // 树状表格懒加载的函数
    async load(row, treeNode, resolve) {
      // 因為所有表格行共用一個load函数，所以需要判断一下是哪一级分类的load函数
      // 没有category1Id说明需要展开的是一级分类
      let dispatchURL = row.category1Id ? 'category/getCategory3List' : 'category/getCategory2List'
      await this.$store.dispatch(dispatchURL, row.id)
      let dispatchList = row.category1Id ? 'category3List' : 'category2List'
      const childrenList = this[dispatchList].map(item => ({
        ...item,
        hasChildren: !row.category1Id,
        key: item.id + item.name
      }))
      resolve(childrenList)
    },
    // 设置表格每一行的样式
    setStyle(row) {
      if (row.row.category1Id) {
        return 'category2List'
      } else if (row.row.category2Id) {
        return 'category3List'
      } else {
        return 'category1List'
      }
    }
  },
  mounted() {
    this.$store.dispatch('category/getCategory1List')
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep .category1List {
    background-color: #d8c8ad;

    &:hover {
      td {
        background-color: #cf9c44;
      }
    }

  }

  ::v-deep .category2List {
    background-color: #dbcfb6;

    &:hover {
      background-color: #d0c7be;
    }
  }


  ::v-deep .category3List {
    background-color: #dfceb5;

    &:hover {
      background-color: #d0c7be;
    }
  }
}
</style>

